@charset "utf-8";
/*//// BASIC //////////////////////////////////////////////////////////////////////////////////////////*/
html,body,div,a,p,ul,ol,li,dl,dt,dd,table,th,td,select,textarea{font:12px/20px Arial, Helvetica, sans-serif;color:#333}/* 기본폰트 */

/*기본링크-목록/뒤로가기 등*/
a.link{display:inline-block;padding:8px;margin:15px 3px;font-size:14px;line-height:14px;border:1px solid #e5e5e5}
/*기본링크-목록/뒤로가기 등*/
/*//// BASIC //////////////////////////////////////////////////////////////////////////////////////////*/

/*//// LAYOUT /////////////////////////////////////////////////////////////////////////////////////////*/
#wrap{width:1000px;height:100%;padding:30px 12px;margin:0 auto}
h1{padding-top:10px}

#header{width:100%}

#container{clear:both;position:relative;width:100%;height:auto;min-height:650;overflow:hidden}
/*//// LAYOUT /////////////////////////////////////////////////////////////////////////////////////////*/

/*//// 네비 기본 스타일 //////////////////////////////////////////////////////////////////////////////////*/
/** 메인메뉴 **/
.main_menu{position:relative;width:100%;height:80px;margin:20px 0 100px;
	border-top:1px solid #ccc
}
.main_menu>li{float:left;width:200px;margin:0;
	border-bottom:1px solid #ccc
}
.main_menu>li>a{display:block;width:100%;height:40px;/* a태그의 경우 기본이 inline이므로 width,height,padding,margin 등 사이즈 및 여백을 지정하려면 display:block를 꼭 넣어줘야 함 */
	text-align:center;font-size:22px;line-height:40px;
	overflow:hidden;					/****************************/
	white-space:nowrap;				/****************************/
	-o-text-overflow:ellipsis;/* width 넘어가는 글자 잘림 */
		 text-overflow:ellipsis;/****************************/
}
	
/** 서브메뉴 **/
.sub_menu{display:none;position:absolute;left:0;top:41px;width:100%;/* 기본 스타일을 다 만든 이후에는 display:none으로 서브메뉴 안보이게 감춰둠 */
	background-color:#fff;
}
.sub_menu>li{float:left}
.sub_menu>li>a{display:block;width:80px;height:39px;padding:0 10px;
	text-align:center;font-size:13px;line-height:39px;
	overflow:hidden;					/****************************/
	white-space:nowrap;				/****************************/
	-o-text-overflow:ellipsis;/* width 넘어가는 글자 잘림 */
		 text-overflow:ellipsis;/****************************/
}

/** 메인메뉴 오버시 서브메뉴 나옴 **/
.main_menu>li:hover>.sub_menu{display:block;z-index:2} /*그냥 마우스오버시-메인페이지에 활용*/
.main_menu>li.on   >.sub_menu{display:block;z-index:1} /*클래스로 고정-서브페이지에 활용*/
/*
* z-index의 숫자가 높을수록 해당 컨텐츠가 더 위로 올라옴
* 위의 경우 서브메뉴 중 하나가 고정되어 나와있을 경우 다른 메뉴를 마우스오버 했을 때 메뉴겹치는 현상 발생 시 마우스오버된 서브메뉴가 고정된 서브메뉴를 가리고 위에 나오게 됨
*/
/** 메인메뉴 오버시 서브메뉴 나옴 **/
/*//// 네비 기본 스타일 //////////////////////////////////////////////////////////////////////////////////*/


/*//// 네비유형1 CSS //////////////////////////////////////////////////////////////////////////////////*/
#nav1{overflow:hidden;position:relative;width:100%}

/** 메인메뉴 마우스오버 효과 **/
#nav1 .main_menu>li:hover>a{font-weight:bold;color:#009900} /*그냥 마우스오버시-메인페이지에 활용*/
#nav1 .main_menu>li.on   >a{font-weight:bold;color:#009900} /*클래스로 고정-서브페이지에 활용*/
/** 메인메뉴 마우스오버 효과 **/

/** 서브메뉴 마우스오버 효과 **/	
#nav1 .sub_menu>li:hover>a{font-weight:bold;color:#009900} /*그냥 마우스오버시-메인페이지에 활용*/
#nav1 .sub_menu>li.on   >a{font-weight:bold;color:#009900} /*클래스로 고정-서브페이지에 활용*/
/** 서브메뉴 마우스오버 효과 **/

/** 각 메인메뉴별로 서브메뉴 위치지정 **/
#nav1 #m_menu1 .sub_menu{padding-left:15px}
#nav1 #m_menu2 .sub_menu{padding-left:200px}
#nav1 #m_menu3 .sub_menu{padding-left:445px}
#nav1 #m_menu4 .sub_menu{padding-left:648px}
#nav1 #m_menu5 .sub_menu{padding-left:700px}
/** 각 메인메뉴별로 서브메뉴 위치지정 **/
/*//// 네비유형1 CSS //////////////////////////////////////////////////////////////////////////////////*/


/*//// 네비유형2 CSS //////////////////////////////////////////////////////////////////////////////////*/
#nav2{overflow:hidden;position:relative;width:100%}

#nav2 .main_menu>li>a{background-color:black;color:white}

/** 메인메뉴 마우스오버 효과 **/
#nav2 .main_menu>li:hover>a, #nav2 .main_menu>li.on>a{background-color:white;color:black}
/*
* 표현 할 효과가 동일한 경우 위와같이 선택자를 ,(콤마)로 구분하여 나열 한 후 한번에 적용. 이때 ,(콤마) 단위로 줄바꿈 가능
*/
/** 메인메뉴 마우스오버 효과 **/

#nav2 .sub_menu>li>a{background-color:green;color:white}

/** 서브메뉴 마우스오버 효과 **/	
#nav2 .sub_menu>li:hover>a,
#nav2 .sub_menu>li.on>a{background-color:orange;font-weight:bold;color:black}
/** 서브메뉴 마우스오버 효과 **/

/** 각 메인메뉴별로 서브메뉴 위치지정 **/
#nav2 #m_menu1 .sub_menu{padding-left:15px}
#nav2 #m_menu2 .sub_menu{padding-left:200px}
#nav2 #m_menu3 .sub_menu{padding-left:445px}
#nav2 #m_menu4 .sub_menu{padding-left:648px}
#nav2 #m_menu5 .sub_menu{padding-left:700px}
/** 각 메인메뉴별로 서브메뉴 위치지정 **/
/*//// 네비유형2 CSS //////////////////////////////////////////////////////////////////////////////////*/


/*//// 네비유형3 CSS //////////////////////////////////////////////////////////////////////////////////*/
#nav3{overflow:hidden;position:relative;width:100%}

/** 메인메뉴 마우스오버 효과 **/
#nav3 .main_menu>li:hover>a, #nav3 .main_menu>li.on>a{background:url(../images/leaf.png) right center no-repeat}
/** 메인메뉴 마우스오버 효과 **/

#nav3 .sub_menu>li>a{padding-left:10px;
	background:url(../images/dot_1.png) left center no-repeat;
	text-align:left;font-weight:bold;color:green;
}

/** 서브메뉴 마우스오버 효과 **/	
#nav3 .sub_menu>li:hover>a,#nav3 .sub_menu>li.on>a{
	background:url(../images/dot_2.png) left center no-repeat;
	font-weight:bold;color:#ff6600;
}
/** 서브메뉴 마우스오버 효과 **/

/** 각 메인메뉴별로 서브메뉴 위치지정 **/
#nav3 #m_menu1 .sub_menu{padding-left:60px}
#nav3 #m_menu2 .sub_menu{padding-left:230px}
#nav3 #m_menu3 .sub_menu{padding-left:320px}
#nav3 #m_menu4 .sub_menu{padding-left:660px}
#nav3 #m_menu5 .sub_menu{padding-left:700px}
/** 각 메인메뉴별로 서브메뉴 위치지정 **/
/*//// 네비유형3 CSS //////////////////////////////////////////////////////////////////////////////////*/


/*//// 네비유형4 CSS //////////////////////////////////////////////////////////////////////////////////*/
#nav4{width:100%;height:40px}/* overflow:hidden을 사용할 경우 width, height값을 넘는 위치에 오는 것들은 모두 보이지 않게 되므로 삭제 */

#nav4 .main_menu{height:100%;border-bottom:1px solid #ccc}
#nav4 .main_menu>li{position:relative;border-bottom:0} /* position:relative; - 서브메뉴가 세로로 나열될 경우 기준이 되는 위치는 각 메인메뉴 <li>가 되어야 함 */

/** 메인메뉴 마우스오버 효과 **/
#nav4 .main_menu>li:hover>a,#nav4 .main_menu>li.on>a{font-weight:bold;color:#009900}
/** 메인메뉴 마우스오버 효과 **/

#nav4 .sub_menu{position:absolute;left:0;top:40px;width:100%}
#nav4 .sub_menu>li{float:none;width:100%;background-color:#FFFFCC}
#nav4 .sub_menu>li>a{width:100%;padding:0;text-align:center}

/** 서브메뉴 마우스오버 효과 **/	
#nav4 .sub_menu>li:hover>a,#nav4 .sub_menu>li.on>a{font-weight:bold;color:#009900}
/** 서브메뉴 마우스오버 효과 **/

/* 각 메인메뉴별로 서브메뉴 위치지정
* 서브 세로네비의 경우 일일이 서브메뉴 위치를 지정해줄 필요가 없음
각 메인메뉴별로 서브메뉴 위치지정 */
/*//// 네비유형3 CSS //////////////////////////////////////////////////////////////////////////////////*/

/*//// 토글네비 CSS ///////////////////////////////////////////////////////////////////////////////////*/
/* 네비 */
#nav4.nav_toggle{margin-bottom:20px}
#toggle{width:100%;height:40px;cursor:pointer;/*a태그는 아니지만 cursor:pointer; 를 해줌으로써 마우스 오버시 손모양으로 마우스가 바뀌게 함*/
	border-top:1px solid #ccc;border-bottom:1px solid #ccc;
	text-align:center;font-size:20px;line-height:40px;
}
#nav4.nav_toggle .main_menu{display:none;margin-top:-1px}
/*//// 토글네비 CSS ///////////////////////////////////////////////////////////////////////////////////*/
